import { Carousel } from 'antd-mobile'
import PropTypes from 'prop-types'

const Swiper = ({list}) => {
  return (
    <div className="swiper">
      {
        list.length > 0
          ? (
            <Carousel
              autoplay={true}
              infinite
              dots={false}
            >
              {
                list.slice(0, 5).map(item => {
                  return (
                    <img key={item.id} src={item.img} alt={item.name}/>
                  )
                })
              }
            </Carousel>
          )
          : (
            <img src="http://placehold.it/900x600" alt=""/>
          )
      }
    </div>
  )
}

Swiper.propTypes = {
  list: PropTypes.array.isRequired
}

Swiper.defaultProps = {
  list: []
}

export default Swiper